<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0  minimum-scale=1.0, maximum-scale=2.0" />
<meta name="MobileOptimized" content="240" />
<link rel="stylesheet" type="text/css" href="/mobile/css/base.css"/>
<script type="text/javascript" src="/common/js/zepto.js"></script>
<script type="text/javascript" src="/mobile/scripts/context.js" ></script>
<script type="text/javascript" src="/app/scripts/common_lib.js" ></script>
<title>品质从此无忧-麦丰网</title>
<style type="text/css">

body {
	margin: 0px;
	background:#f1f1f1;
	font-family:Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Tohoma,Arial;
	text-align: center;
	width:100%;
}

.div-header {
	width: 100%;
	height: 45px;
	color: #FFF;
	margin: 0 auto;
	line-height: 45px;
	text-align: left;
	background: url(images/red_bg.jpg) repeat;
}

#return{
	color:#FFFFFF; 
	text-align:center; 
	margin-top:6px; 
	margin-left:5px; 
	background:url(images/return.png) no-repeat; 
	width:70px; height:32px; font-size:16px; 
	padding-left:5px; line-height:32px; 
	float:left}

#title{ 
	font-size:18px; 
	line-height:45px; 
	padding-left:0px; 
	margin-left:0px;
	width:200px; 
	height:45px; 
	float:left;
	padding-left: 10px;
}



#user{
	background:url(images/user_white.png) no-repeat center;
	width:32px; 
	height:45px; 
	float:right;
	
}

ul,li{list-style:none; padding: 0;margin: 0;}

.div-leader {
	width: 100%;
	max-width:320px;
	height: 25px;
	background-color: transparent;
	margin: 0 auto;
	/*
	left:50%;
	margin-left:-160px;
	position:fixed; 
	*/
}
.table-leader {
	width: 100%;
	text-align: center;
}

.menu1{color:#777;line-height:23px; width:12%;  padding:0px 2px; border-bottom:1px solid #CCC;  font-size:14px; }
.menu2{color:#ff3f40;line-height:23px;  width:12%; padding:0px 2px; border-bottom:1px solid #ff3f40; font-weight:bold; font-size:14px;}

.i_box a {
	padding: 2px 5px;
	background-color: #e9e9e9;
	border: 1px solid #ccc;
	text-decoration: none;
	color: #585858;
	line-height: 20px;
}
.i_box * {
	vertical-align: middle;
}
.i_box input {
	width: 30px;
	height: 18px;
	margin: 0 8px;
	padding: 2px;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 16px;
}

.div-banner {
	width:320px;
	height: 195px;
	background-color: white;
	margin: 0 auto;
	margin-top: 5px;
	/*
	left:50%;
	margin-top: 30px;
	margin-left: -160px;
	position: fixed;
	*/
}

.div-content {
	width: 100%;
	max-width: 330px;
	margin: 0 auto;
	margin-top: 8px;
}

.div-divide {
	background:url(/mobile/images/line.png) repeat-x; 
	width:100%; 
	margin:5px 0; 
	height:18px;
}

.div-section {
	background-color: #FFF;
	text-align: left;
	padding: 8px;
	margin-top: 8px;
}

.div-product {
	width: 100%;
	max-width: 330px;
	height: 150px;
	margin: 0 auto;
	margin-top: 8px;
}

.div-image {
	width: 60%;
	height: 100%;
	float: left;
}

.div-name {
	width: 40%;
	height: 40%;
	float: right;
}

.div-description {
	width: 40%;
	height: 60%;
	float: right;
}

.img-product {
	width: 100%;
	height: 100%;
}

.div-footer {
	width: 100%;
	max-width: 330px;
	height:100px;
	background-color: #CCC;
	top: 100%;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 50px;
}

.div-bottom {
	width: 100%;
	height: 50px;
	top: 100%;
	left:-50%;
	margin-left:50%;
	margin-top: -50px;
	position: fixed;
}

.div-loading {
	width:35px;
	height:35px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	display: none;
}

.img-loading {
	width: 100%;
	height: 100%;
}

#table-bottom { 
	width:100%; 
	height:35px;	
	line-height:35px; 
	background:#333;
	color: #CCC;
	bottom: 0px;
	position: fixed;
}

.td-product-name {
 	background:#b6a98f; 
 	color:#FFFFFF; 
 	font-weight:bold;
 	line-height:25px;
 	text-align: left;
 }
 
 .td-spec {
 	text-align: left;
 }

.menu-down{float:left; border:1px solid #ff3e3f; background:url(images/select_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#000000; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}
.menu-up{float:left;border:1px solid #CCCCCC; font-size:14px; padding:0px 5px;height:22px; color:#000000; line-height:25px; margin-right:5px;margin-bottom:5px; text-align:center; background:#FFFFFF}
.menu-note{float:left; border:1px solid #666666; background:url(images/note_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#666666; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}


.bitButton{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}
.bitButton1{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg3.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}

.smallButton{ margin-top:10px;border:0;height:30px; background:url(/mobile/images/button_bg.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}
.smallButton1{border:0;height:22px; background:url(/mobile/images/button_bg.jpg) repeat; color:#FFFFFF; text-align:center;}
.smallButton1_1{border:0;height:22px; background:url(/mobile/images/button_bg3.jpg) repeat; color:#FFFFFF; text-align:center;}
.smallButton1_2{border:0;height:22px; background:url(/mobile/images/button_bg1.jpg) repeat; color:#FFFFFF; text-align:center;}
.smallButton2{ margin-top:10px;border:0;height:30px; background:url(/mobile/images/button_bg1.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}


.table-receive {
	width: 100%;
}
.table-receive td{
	border-bottom:1px dotted #CCC;
	text-align: left;
	padding-top: 10px;
}

</style>
</head>
<body>
	<div class="div-header">
		<ul>
			<li id="return" onclick="location.href='service.html'">返 回</li>
  			<li id="title" style="text-align:center; width:auto;"><span id="order_status"></span>订单</li>
  			<li id="user" onclick="location.href='/'"></li>
		</ul>
	</div>
	
	<div class = "div-content">
		<div id="order-list">
		</div>
		<div class="div-section">
			<table bgcolor="#FFFFFF" width="100%" border="0" cellspacing="5" cellpadding="0">
			  <tr>
			    <td>
			    	<input id="button-prev-page" type="button" class="smallButton2" value="上一页" onclick="prevPage()" />&nbsp;&nbsp;
			    	<input id="button-next-page" type="button" class="smallButton" value="下一页" onclick="nextPage()" />
			    </td>
			    <td align="right">共&nbsp;<strong id="total-count"></strong>&nbsp;条记录</td>
			  </tr>
			</table>
		</div>
	</div>	
	
	<div style="padding:5px;"></div>
	
	<div class = "div-footer">
		<iframe class = "iframe-view" src="/mobile/footer.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	<div class = "div-bottom">
		<iframe class = "iframe-view" src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
</body>
<script type="text/javascript">
	//var order_status = '';
	var page_no = 1;
	var page_size = 5;
	var page_count = 1;
	$(document).ready(function() {
		cjl.getTitle();
		//order_status = cjl.requestData("order_status");
		getOrders();
	});
	
	function prevPage() {
		if(page_no <= 1) {
			page_no = 1;
			alert("当前是第一页。");
			return;
		}
		page_no --;
		getOrders();
	}
	
	function nextPage() {
		if(page_no >= page_count) {
			page_no = page_count;
			alert("当前是最后一页。");
			return;
		}
		page_no ++;
		getOrders();
	}
	
	function updateButtonStatus() {
		if(page_no >= page_count) {
			$("#button-next-page").removeClass("smallButton");
			$("#button-next-page").addClass("smallButton2");
		} else {
			$("#button-next-page").removeClass("smallButton2");
			$("#button-next-page").addClass("smallButton");
		}
		
		if(page_no <= 1) {
			$("#button-prev-page").removeClass("smallButton");
			$("#button-prev-page").addClass("smallButton2");
		} else {
			$("#button-prev-page").removeClass("smallButton2");
			$("#button-prev-page").addClass("smallButton");
		}
	}
	
	function getOrders() {
		var url = "/order/list";
		
		cjl.get(url, {page_no: page_no, page_size:page_size}, function(body) {
			var commonBean = body.common_bean;
			$("#order_status").text(commonBean.description);
			var page = body.page;
			var orderList = page.result;
			var totalCount = page.totalCount;
			page_count = Math.ceil(totalCount / page_size);
			$("#total-count").text(totalCount);
			$order_list = $("#order-list");
			$order_list.empty();
			var html = '';
			for(var i in orderList) {
				var order = orderList[i];
				html += '<div class="div-section">';
				html += '<table width="100%" border="0" cellspacing="5" cellpadding="0">';
				html += '<tr>';
				html += '<td width="10%" rowspan="3" valign="top"><img src="'+order.image+'" width="100px" height="63px" /></td>';
				html += '<td colspan="2" nowrap="nowrap" style="font-size:14px"><font color="#FF0000"><strong>NO.</strong></font>&nbsp;'+order.id+'</td>';
				html += '</tr>';
				html += '<tr>';
				html += '<td width="85%" style="font-size:14px">'+order.product_name+'&nbsp;&nbsp;'+order.catalog_name+'</td>';
				html += '<td width="5%" style="font-size:14px">&nbsp;</td>';
				html += '</tr>';
				html += '<tr>';
				html += '<td height="19" colspan="2" align="left" valign="top">';
				if(commonBean.name == 'paying') {
					html += '<input onclick="buyNow('+order.id+')" name="button2" type="button" class="smallButton1" id="button2" value="现在付款" />';
					html += '<input onclick="cancleOrder('+order.id+')" name="button"  type="button" class="smallButton1_1" id="button" value="取消订单" />';
				}
				html += '</td>';
				html += '</tr>';
				html += '<tr>';
				html += '<td height="19" align="center" nowrap="nowrap" style="font-size:18px; line-height:12px; font-weight:bold; color:#ff3f3f" >￥'+order.price.toFixed(2)+'</td>';
				html += '<td colspan="2" align="right" valign="middle" style="font-size:12px; color:#666666">'+formatTime(order.create_time)+'</td>';
				html += '</tr>';
				html += '<tr>';
				html += '<td height="19" colspan="3" align="left" style="font-size:12px; color:#999" >';
				html += '<table width="100%" border="0" bgcolor="#f1f1f1" cellspacing="1" cellpadding="5">';
				html += '<tr>';
				html += '<td align="center" valign="middle" nowrap="nowrap" bgcolor="#FBFBFD" style="font-size:12px;"><strong>规格</strong></td>';
				html += '<td align="center" valign="middle" nowrap="nowrap" bgcolor="#FBFBFD" style="font-size:12px;"><strong>单价</strong></td>';
				html += '<td align="center" valign="middle" nowrap="nowrap" bgcolor="#FBFBFD" style="font-size:12px;"><strong>数量</strong></td>';
				html += '</tr>';
				html += '<tr>';
				html += '<td align="center" valign="middle" nowrap="nowrap" bgcolor="#FBFBFD" style="font-size:12px;">'+order.specification_name+'</td>';
				html += '<td align="center" valign="middle" nowrap="nowrap" bgcolor="#FBFBFD" style="font-size:12px;">'+order.price.toFixed(2)+'</td>';
				html += '<td align="center" valign="middle" nowrap="nowrap" bgcolor="#FBFBFD" style="font-size:12px;">'+order.quantity+'</td>';
				html += '</tr>';
				html += '<tr>';
				html += '<td colspan="3" align="left" valign="middle" bgcolor="#FBFBFD" style="font-size:14px; color:#06C;"><span style="font-size:12px;"><strong>收件人：</strong>'+order.rec_name+'</span><span style="font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<strong>手机：</strong>'+order.phone+'</span></td>';
				html += '</tr>';
				html += '<tr>';
				html += '<td colspan="3" align="left" valign="middle" bgcolor="#FBFBFD" style="font-size:14px; color:#06C;"><span style="font-size:12px;"><strong>收件地址：</strong>'+order.address+'</span></td>';
				html += '</tr>';
				if(commonBean.name == 'receiving') {
					html += '<tr>';
					html += '<td colspan="3" align="left" valign="middle" bgcolor="#FBFBFD" style="font-size:14px; color:#06C;"><span style="font-size:12px;"><strong>快递公司：</strong>'+order.express_com+'</span><span style="font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<strong>单号：</strong>'+order.express_no+'</span></td>';
					html += '</tr>';
					
				}
				html += '</table>';
				html += '</td>';
				html += '</tr>';
				html += '</table>';
				html += '</div>'
				html += '<div class="div-divide"></div>';
			}
			
			$order_list.append(html);
			
			updateButtonStatus();
			
			$(window).scrollTop(0);
		});
	}
	
	function buyNow(id) {
		var url = "/order/select"
		cjl.post(url,{id:id}, function(body) {
			window.parent.location.href="/mobile/orderConfirm.html";
		});
	}
	
	function cancleOrder(id) {
		if(confirm("确认取消该订单吗？")) {
			var url = "/order/cancel";
			cjl.post(url, {id:id}, function(body) {
				getOrders();
			});
		}
	}
	
	Date.prototype.format =function(format)
	{
		var o = {
			"M+" : this.getMonth()+1, //month
			"d+" : this.getDate(), //day
			"H+" : this.getHours(), //hour
			"m+" : this.getMinutes(), //minute
			"s+" : this.getSeconds(), //second
			"q+" : Math.floor((this.getMonth()+3)/3), //quarter
			"S" : this.getMilliseconds() //millisecond
		};
		
		if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
		(this.getFullYear()+"").substr(4- RegExp.$1.length));
		for(var k in o)if(new RegExp("("+ k +")").test(format))
		format = format.replace(RegExp.$1,
		RegExp.$1.length==1? o[k] :
		("00"+ o[k]).substr((""+ o[k]).length));
		return format;
	};

	function formatTime(date) {
		return new Date(date).format("yyyy-MM-dd HH:mm:ss");
	}
	
	
</script>
</html>